<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="zh_CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <!-- <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"/> -->
  <link rel="stylesheet" href="/css/materialize.min.css"/>

  <link rel="stylesheet" href="/css/comm100-new.css"/>

  <title>Comm100 - 高效在线客服系统解决方案</title>

</head>
<body>
<ul id="userDropdown" class="dropdown-content">
  <li><a th:if="${userName}" th:text="${userName}" href="/user/basic">用户主页</a></li>
  <li class="divider"></li>
  <li>
    <form th:action="@{/logout}" method="post">
      <input type="submit" class="btn" value="退出"/>
    </form>
  </li>
</ul>
<nav class="top-nav z-depth-2">
  <div class="nav-wrapper white">
    <div class="brand-logo">
      <a href="/" class="logo-link"><img class="logo-img" src="/img/Comm100_logo.png"/></a>
      <span class="brand-title">高效在线客服系统</span>
    </div>
    <ul id="nav-mobile" class="right hide-on-med-and-down" style="">
      <li><a href="javascript:;" class="login-button" th:if="${notLogin}">登录</a></li>
      <li>
        <a href="javascript:;" class="register-button waves-effect waves-light btn" th:if="${notLogin}">注册</a>
      </li>
      <li><a class="dropdown-button" href="#!" th:if="${userName}" th:text="${userName}"
             data-activates="userDropdown">用户名</a></li>
    </ul>
  </div>
</nav>
<main class="container">
  <div class="slogan-warpper">
    <h1 class="slogan-title">企业在线聊天软件</h1>
    <p class="slogan-text">实时留住网站访客。提高客户转换率、销售量和客户满意度。</p>
  </div>
  <a class="register-button waves-effect waves-light btn" href="javascript:;">
    免费试用
  </a>
</main>
<div class="login-layer" hidden="true">
  <div class="login-panel" style="display: none">
    <div class="login-panel-header">
      <b class="login-panel-header-status">登录</b>
      /
      <a class="login-panel-header-trans" href="javascript:;">注册</a>
      <b class="login-panel-close">x</b>
    </div>
    <form class="login-panel-body-login container" th:action="@{/login}" action="/postLogin" method="post">
      <div class="input-field">
        <input id="first_name-login" type="text" name="username" class="validate"/>
        <label for="first_name-login">用户名</label>
      </div>
      <div class="input-field">
        <input id="password-login" type="password" name="password" class="validate"/>
        <label for="password-login">密码</label>
      </div>
      <button class="login-panel-body-submit btn" type="submit">登录</button>
    </form>
  </div>

  <div class="register-panel" style="display: none">
    <div class="login-panel-header">
      <b class="login-panel-header-status">注册</b>
      /
      <a class="login-panel-header-trans" href="javascript:;">登录</a>
      <b class="login-panel-close">x</b>
    </div>
    <form class="login-panel-body-register container" th:action="@{/register}" action="/postRegister" method="post">
      <div class="input-field">
        <input id="first_name-register" type="text" class="validate" name="username"/>
        <label for="first_name-register">用户名</label>
      </div>
      <div class="input-field">
        <input id="email-register" type="email" class="validate" name="email"/>
        <label for="email-register">邮箱</label>
      </div>
      <div class="input-field">
        <input id="password-register" type="password" class="validate" name="password"/>
        <label for="password-register">密码</label>
      </div>
      <button class="login-panel-body-submit btn" type="submit">注册</button>
    </form>

  </div>


</div>
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/materialize.min.js"></script>
<script src="/js/comm100-new.js"></script>
<script>


  $(document).ready(function() {

    $(".login-button").click(function() {
      showLoginPanel();
    });

    $(".login-panel-close").click(function() {
      hideLoginLayer();
    });

    $(".login-panel-header-trans").click(function() {
      switchLoginPanel();
    });

    $(".register-button").on('click', function() {
      showRegisterPanel();
    });

  });

</script>
</body>
</html>
